<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="poster">
					<image @click="screen" :src="data.img"></image>
				</view>
				<view class="choose">
					<view class="share-title">选择模版</view>
					<view class="share-bg">
						<view @click="chooseImg" class="cross-left" data-id="1">
							<image src="/static/images/left.png" v-if="data.left"></image>
						</view>
						<image @click="tagChoose" class="bg-item " :class="[currentItem==item.id?'active':'']" :data-id="item.id" :src="item.pic_url"
						 v-for="(item,index,bg) in data.pic_list" :key="bg"></image>
						<view @click="chooseImg" class="cross-right" data-id="2">
							<image src="/static/images/xi-right.png" v-if="data.right"></image>
						</view>
					</view>
					<button @click="saveImage" class="share-btn" v-if="data.save">保存图片</button>
					<button @click="openSetting" class="share-btn" v-if="data.get">授予权限</button>
					<view class="share-tip">保存至相册可分享至朋友圈</view>
				</view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					img: [],
					todayStep: 0,
					pic_list: {},
					save: !0,
					page: 1,
					left: !1,
					right: !0,
					get: !1
				},
			};
		},
		onLoad: function(t) {myVue = this;
			myVue.getApp.page.onLoad(this, t);
			var e = this,
				o = 0;
			t.todayStep && (o = t.todayStep), e.setData({
				num: o
			});
			e.getApp.core.showLoading({
				title: "分享图片生成中...",
				mask: !0
			}), e.getApp.request({
				url: e.getApp.api.step.pic_list,
				data: {
					page: 1
				},
				success: function(t) {
					var a = t.data.pic_list,
						s = !0;
					a[0].pic_url.length > 0 ? (a.length < 4 && (s = !1), e.setData({
						pic_list: a,
						currentItem: a[0].id,
						right: s
					}), e.getApp.request({
						url: e.getApp.api.step.qrcode,
						data: {
							goods_id: a[0].id,
							num: o
						},
						success: function(t) {
							setTimeout(function() {
								0 == t.code ? e.setData({
									img: t.data.pic_url
								}) : e.getApp.core.showModal({
									content: t.msg,
									showCancel: !1
								}), e.getApp.core.hideLoading();
							}, 1e3);
						}
					})) : (e.getApp.core.hideLoading(), e.getApp.core.showToast({
						title: "暂无海报模板",
						icon: "none",
						duration: 1e3
					}), setTimeout(function() {
						e.getApp.core.navigateTo({
							url: "../index/index"
						});
					}, 1e3));
				}
			});
		},
		methods: {
			tagChoose: function(t) {
				var e = this,
					o = t.currentTarget.dataset.id,
					a = e.data.num;
				e.setData({
					currentItem: o
				}), e.getApp.core.showLoading({
					title: "分享图片生成中...",
					mask: !0
				}), e.getApp.request({
					url: e.getApp.api.step.qrcode,
					data: {
						goods_id: o,
						num: a
					},
					success: function(t) {
						console.log(t), 0 == t.code ? e.setData({
							img: t.data.pic_url
						}) : e.getApp.core.showModal({
							content: t.msg,
							showCancel: !1
						}), setTimeout(function() {
							e.getApp.core.hideLoading();
						}, 1e3);
					},
					fail: function(t) {
						e.getApp.core.showModal({
							content: t.msg,
							showCancel: !1
						});
					}
				});
			},
			screen: function() {
				var t = this.data.img;
				myVue.getApp.core.previewImage({
					urls: [t]
				});
			},
			saveImage: function() {
				var t = this;
				t.getApp.core.authorize({
					scope: "scope.writePhotosAlbum",
					success: function(e) {
						"authorize:ok" == e.errMsg && t.getApp.core.getImageInfo({
							src: t.data.img,
							success: function(t) {
								t.getApp.core.saveImageToPhotosAlbum({
									filePath: t.path,
									success: function(t) {
										t.getApp.core.showToast({
											title: "保存成功，快去发朋友圈吧！",
											icon: "success",
											duration: 2e3
										});
									},
									fail: function(t) {
										t.getApp.core.showModal({
											content: "授权失败",
											showCancel: !1
										});
									}
								});
							}
						});
					},
					fail: function(e) {
						t.getApp.core.showModal({
							content: "为确保您的正常使用，请点击下方按钮授权",
							showCancel: !1
						}), t.setData({
							save: !1,
							get: !0
						});
					}
				});
			},
			openSetting: function() {
				var t = this;
				uni.openSetting({
					success: function(e) {
						1 == e.authSetting["scope.writePhotosAlbum"] && t.setData({
							save: !0,
							get: !1
						});
					},
					fail: function(t) {
						t.getApp.core.showModal({
							content: "为确保您的正常使用，请点击下方按钮授权",
							showCancel: !1
						});
					}
				});
			},
			chooseImg: function(t) {
				var e = this,
					o = this.data.page,
					a = !0,
					s = !0,
					i = t.currentTarget.dataset.id;
				1 == i ? o-- : 2 == i && o++, e.getApp.request({
					url: e.getApp.api.step.pic_list,
					data: {
						page: o
					},
					success: function(t) {
						var i = t.data.pic_list;
						0 == i.length ? (e.getApp.core.showToast({
							title: "没有更多了",
							icon: "none",
							duration: 1e3
						}), s = !1, e.setData({
							right: s
						})) : (1 == o && (a = !1), i.length < 4 && (s = !1), e.setData({
							page: o,
							pic_list: i,
							left: a,
							right: s
						}));
					}
				});
			},
		}
	}
</script>

<style scoped>
	page { 
		background-color: #f7f7f7; 
	} 
 
	.poster { 
		height: 708upx; 
		width: 456upx; 
		margin: 46upx auto 48upx; 
		background-color: whtie; 
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15); 
	} 
 
	.poster image { 
		height: 708upx; 
		width: 456upx; 
	} 
 
	.mycanvas { 
		height: 1165upx; 
		width: 750upx; 
	} 
 
	.share-title { 
		font-size: 11pt; 
		color: #999; 
		text-align: center; 
		margin-bottom: 20upx; 
	} 
 
	.share-bg { 
		height: 144upx; 
		text-align: center; 
	} 
 
	.cross-left { 
		float: left; 
		display: inline-block; 
		height: 100%; 
		text-align: center; 
		width: 100upx; 
		padding: 59upx 37upx; 
	} 
 
	.cross-right { 
		float: right; 
		height: 100%; 
		text-align: center; 
		margin-left: -20upx; 
		width: 100upx; 
		padding: 59upx 37upx; 
	} 
 
	.cross-left image, 
	.cross-right image { 
		height: 26upx; 
		width: 26upx; 
	} 
 
	.share-bg .active { 
		border: 4upx solid #ff4544; 
	} 
 
	.bg-item { 
		height: 144upx; 
		width: 120upx; 
		margin-right: 20upx; 
	} 
 
	.share-btn { 
		height: 80upx; 
		width: 500upx; 
		margin-top: 40upx; 
		margin-bottom: 20upx; 
		color: white; 
		background-color: #ff4544; 
		border-radius: 40upx; 
		line-height: 80upx; 
	} 
 
	.share-tip { 
		font-size: 9pt; 
		color: #999; 
		text-align: center; 
	}
</style>
